<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery - jTabs plugin</title>
<style>
* {margin:0px; padding:0px;}
.wrap {width:500px; margin:50px auto;}
.clear {clear:both;}

ul.tabs {list-style:none; width:500px;}
ul.tabs li:first-child {border-left:1px solid #ccc;}
ul.tabs li {float:left; border-right:1px solid #ccc; border-top:1px solid #ccc; background-color:#eee;}
ul.tabs li.active {border-bottom:1px solid #fff; background-color:#fff; margin-bottom:-1px;}
ul.tabs li a {display:block; padding:5px 10px; color:#777; letter-spacing:-1px; outline:none; text-decoration:none; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;}
ul.tabs li.active a {font-weight:600; color:#000;}

div.tabs_content {width:500px; border:1px solid #ccc;}
div.tabs_content > div {padding:20px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jTabs.js"></script> 
<script>
$(document).ready(function(){
    $("ul.tabs").jTabs({content: ".tabs_content", animate: true});                       
});
</script>
</head>

<body>
<div class="wrap">
    <ul class="tabs">  
        <li class="active"><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
    </ul>  
    <div class="clear"></div>
    <div class="tabs_content">
        <div>Sample 1 content</div>
        <div>Sample 2 content</div>
        <div>Samplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tabSamplest content for the 3rd tab</div>
    </div><!-- tabs content -->
</div><!-- wrap -->

</body>
</html>